<template>
  <div class="lookOne">
    <p-modal
        :title="title"
        :modal="modal"
        @cancel="cancelTo"
        :visible.sync="startVisible"
        width="900px"
        :append-to-body="true"
        class="assignDialog"
      >
        <div class="assign-wrap">
          <div class="warp-left">
            <p-tree
              @select="startHandleNodeClickAnt"
              :load-data="startGetProcessTreeChildrenAnt"
              :tree-data="treeData"
            />
          </div>
          <div class="warp-right">
            <div class="searchInput">
              <p-input-search allow-clear @search="searchInputClick" @keyup.enter.native="searchInputClick" v-model="searchUser" placeholder="请输入搜索内容">
              </p-input-search>
            </div>
            <p-table :pagination="false" bordered :columns="columns" :data-source="assignTableData">
              <div slot="name" slot-scope="record">
                <p-checkbox @change="tableChange(record.key)" v-model="record.checked">{{record.name}}</p-checkbox>
              </div>
            </p-table>
            <div class="pagination">
              <p-pagination 
                :defaultPageSize="pageSize"
                @show-size-change="handleSizeChange"
                @change="handleCurrentChange"
                v-model="currentPage"
                :show-total="total => `共 ${total} 条`" 
                :total="total" />  
            </div>
          </div>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <p-button @click="cancelTo">取 消</p-button>
          <p-button
            type="primary"
            @click="submitTo"
          >确 定</p-button>
        </span>
      </p-modal>
  </div>
</template>
<script>
import process from '@/api/process'
const columns = [
  {
    title: '姓名',
    key: 'name',
    ellipsis: true,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '所属部门 岗位',
    key: 'orgposRemark',
    ellipsis: true,
    dataIndex: 'orgposRemark',
  },
];
export default {
  props:{
    title: [String],
    modal: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      columns,
      treeData: [],
      assigneeId: '',
      curCode: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchUser: '',
      assignTableData: [],
      srtatCheckList: [],
      tableHeight: "300",
      srtatCheckChooseList: [],
      srtatCheckListRepeat: [],
      srtatCheckChooseListRepeat: [],
      startVisible: false,
    };
  },
  watch: {
  },
  computed:{
  },
  created(){
    process.getOrgTreeList({
      code: '', 
    }).then(res => {
      let newArray2 = [];
      for (var i = 0; i < res.data.length; i++) {
        const curData = res.data[i];
        newArray2.push({
          key: curData.code,
          title: curData.name,
          isLeaf: curData.leaf,
        });
      }
      this.treeData = [...newArray2];
    }); 
  },
  mounted() {
    // this.loadData();
  },
  methods: {
    cancelTo(){
      this.startVisible = false;
    },
    submitTo(){
      this.startVisible = false;
    },
    searchInputClick(){
      this.getAssignTableData();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getAssignTableData();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getAssignTableData();
    },
    tableChange(index){
      if (this.assignTableData[index].checked){
         this.assignTableData.forEach( (el, i) =>{
           if ( index !== i ){
             el.checked = false;
           }
        });
        this.assigneeId = this.assignTableData[index].uid;
        console.log(this.assigneeId);
      }
    },
    startGetProcessTreeChildrenAnt(treeNode){
      if (treeNode.dataRef.children) {
        return;
      }
      return process.getOrgTreeList({
        code:  treeNode.eventKey
      }).then(res => {
        let newArray2 = [];
        for (var i = 0; i < res.data.length; i++) {
          const curData = res.data[i];
          newArray2.push({
            key: curData.code,
            title: curData.name,
            isLeaf: curData.leaf,
          });
        }
        treeNode.dataRef.children = newArray2;
        this.treeData = [...this.treeData];
      }); 
    },
    getAssignTableData(){
      process.userList({
          orgCode: this.curCode,
          keyword: this.searchUser, 
          limit: this.pageSize, 
          pageNo: this.currentPage, 
        }).then(res => {
          let curData = res.data.records || [];
          curData.forEach( (el, i) =>{
            el.checked = false;
            el.key = i;
          });
          this.assignTableData = curData;
          this.total = res.data.total;
      });  
    },
    startHandleNodeClickAnt(data){
      this.curCode = data[0];
      this.getAssignTableData();
    },
  }
};
</script>

<style scoped lang="less">
.assignDialog{
  .el-dialog__body{
    max-height: 400px;
  }
  .searchInput{
    margin-bottom: 16px;
    width: 240px;
  }
  .pagination{
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
  }
}
.assign-wrap{
  display: flex;
  // max-height: 500px;
  overflow: auto;
  .warp-left{
    width: 300px;
    max-height: 396px;
    overflow: auto;
  }
  .warp-right{
    width: calc(100% - 300px);
    margin-left: 16px;
  }
}
</style>
